<template>
   <!-- 组织架构 -->
   <div class="container">
      <el-card
         shadow="never"
         style="padding: 0px"
      >
         <CardTitle
            :title="pageTitle"
            :hasBackButton="showBackButton"
         ></CardTitle>
      </el-card>
      <el-row
         :gutter="0"
         class="full-height-row"
      >
         <!-- 左侧部门树 -->
         <el-col
            :span="4"
            class="full-height-col-left"
         >
            <el-card
               style="background: #f5f8fd; height: 62px"
               shadow="never"
            >
               <div
                  style="display: flex; justify-content: space-between; flex-direction: row; align-items: center"
                  v-if="!isSearch"
               >
                  <div>角色分组</div>
                  <div style="cursor: pointer">
                     <el-icon
                        style="margin-right: 20px"
                        @click="handleSearch"
                     >
                        <Search />
                     </el-icon>
                     <el-icon>
                        <Plus />
                     </el-icon>
                  </div>
               </div>
               <div
                  style="display: flex; justify-content: space-between; flex-direction: row; align-items: center"
                  v-if="isSearch"
               >
                  <el-input
                     ref="inputRef"
                     @blur="isSearch = false"
                     autofocus
                     placeholder="请输入"
                     suffix-icon="Search"
                     v-model="filterText"
                  />
                  <el-icon>
                     <Plus />
                  </el-icon>
               </div>
            </el-card>
            <el-card
               shadow="never"
               class="full-height-card"
               style="overflow-y: scroll"
            >
               <div class="button-container"></div>
               <el-tree
                  highlight-current
                  class="full-height-tree"
                  :data="Array.isArray(departmentTree) ? departmentTree : []"
                  node-key="id"
                  :props="treeProps"
                  accordion
                  @node-click="handleNodeClick"
                  :filter-node-method="filterNode"
                  ref="treeRef"
               >
                  <template #default="scope">
                     <div class="custom-tree-node">
                        <span :class="{ 'disabled-node': scope.node.data.status === 0 }">{{ scope.node.label }}</span>
                        <span class="operation-icons">
                           <el-icon
                              class="custom-icon node-tools"
                              :class="{ rotate: currentNodeId === scope.node.data.id }"
                           >
                              <Tools color="#172B4D" />
                           </el-icon>
                        </span>
                     </div>
                  </template>
               </el-tree>
            </el-card>
         </el-col>
         <!-- 右侧表单 -->
         <el-col
            :span="20"
            class="full-height-col-right"
         >
         </el-col>
      </el-row>
   </div>
</template>

<script setup lang="ts">
   import { ref, reactive, computed, watch, nextTick } from "vue";
   import CardTitle from "@/components/card-title/CardTitle.vue";
   import { Plus, Search, Tools } from "@element-plus/icons-vue";
   import { ElMessage } from "element-plus";
   import type { TreeInstance } from "element-plus";

   const showBackButton = false;
   const isSearch = ref<boolean>(false); //是否搜索
   const inputRef = ref();
   const pageTitle = "角色权限";
   const treeProps = {
      children: "children",
      label: "name",
   };
   // 模拟部门数据
   const departmentTree = ref([
      {
         id: 6,
         parent_id: 0,
         manager_id: 5,
         name: "财务部",
         num: "ORG5571",
         type: 1,
         content: null,
         status: 1,
         created_at: "2024-10-18 16:01:58",
         manager_name: "测试5",
         children: [
            {
               id: 9,
               parent_id: 6,
               manager_id: 0,
               name: "出纳",
               num: null,
               type: 1,
               content: null,
               status: 1,
               created_at: "2024-10-23 11:07:10",
               manager_name: "无",
               children: [],
            },
            {
               id: 10,
               parent_id: 6,
               manager_id: 4,
               name: "审计",
               num: null,
               type: 1,
               content: null,
               status: 1,
               created_at: "2024-10-23 11:07:13",
               manager_name: "测试4",
               children: [],
            },
         ],
      },
   ]);

   const handleSearch = () => {
      console.log("handleSearch");
      isSearch.value = true;
   };
   // 监听isSearch变化，当为true时自动获取焦点
   watch(isSearch, (newVal) => {
      if (newVal) {
         // 使用nextTick确保DOM更新后再获取焦点
         nextTick(() => {
            inputRef.value?.focus();
         });
      }
   });

   interface User {
      Sname: string;
      name: string;
      Sphone: string;
      Sposition: string;
      id: number;
   }
   interface Tree {
      label: string;
      children?: Tree[];
   }
   interface Tree {
      [key: string]: any;
   }

   const filterText = ref("");
   const treeRef = ref<TreeInstance>();

   const defaultProps = {
      children: "children",
      label: "label",
   };

   watch(filterText, (val) => {
      treeRef.value!.filter(val);
      // 当搜索框清空时，重置树的展开状态
      if (!val) {
         nextTick(() => {
            // 收起所有节点
            treeRef.value?.store.setData(departmentTree.value);
         });
      }
   });
   //watch(value,()=>{})
   //watchEffect(()=>{})
   const filterNode = (value: string, data: Tree) => {
      if (!value) return true;
      return data.name.includes(value);
   };
   // 当前点击的节点ID
   const currentNodeId = ref<number | null>(null);

   // 节点点击处理
   const handleNodeClick = (data: any) => {
      currentNodeId.value = data.id;
      console.log("Node clicked:", data);
   };

   // 节点编辑处理
   const handleEdit = (data: any) => {
      console.log("Edit node:", data);
   };

   const search = ref("");
</script>

<style scoped>
   html,
   body,
   #app {
      height: 100%;
      margin: 0;
   }

   .container {
      height: 80vh;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
   }

   .full-height-row {
      flex: 1;
      min-height: 0;
   }

   .full-height-col-left {
      display: flex;
      flex-direction: column;
      height: 100%;
   }

   .full-height-col-left .full-height-card :deep(.el-card__body) {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 10px;
      background: #f5f8fd;
   }
   .right-container-title {
      background: #fff;
      position: fixed;
      top: 138px;
      z-index: 10;
      display: flex;
      height: 60px;
      width: 69%;
      justify-content: space-between;
      align-items: center;
   }
   .full-height-col-right {
      display: flex;
      flex-direction: column;
      height: 100%;
      margin-top: 20px;
   }

   .full-height-card {
      flex: 1;
      display: flex;
      flex-direction: column;
   }

   .full-height-card :deep(.el-card__body) {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 10px;
   }

   :deep(.el-tree-node.is-current > .el-tree-node__content .custom-tree-node span) {
      color: #8272ff;
   }
   :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #6860ff;
      border-color: #6860ff;
   }
   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      background-color: #6860ff;
      border-color: #6860ff;
   }
   :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
      color: #606266;
   }
   .full-height-tree {
      flex: 1;
      overflow: auto;
   }

   .empty-tip {
      color: #999;
      text-align: center;
      padding: 40px 0;
   }

   .mb-4 {
      margin-bottom: 1rem;
   }

   .button-container {
      padding: 0 0px;
      display: flex;
      justify-content: space-between;
   }

   .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 8px;
   }

   .operation-icons {
      display: none;
      margin-left: 10px;
   }

   .custom-tree-node .operation-icons {
      display: inline-flex;
      gap: 8px;
   }

   .custom-icon {
      font-size: 16px;
      color: #409eff;
      cursor: pointer;
   }

   .custom-icon:hover {
      color: #66b1ff;
   }

   @keyframes rotate-animation {
      from {
         transform: rotate(0deg);
      }
      to {
         transform: rotate(360deg);
      }
   }

   .rotate {
      animation: rotate-animation 0.5s linear;
   }

   .node-tools {
      transition: transform 0.3s ease;
   }

   :deep(.el-tree-node__content) {
      height: 32px;
   }

   :deep(.title-bar) {
      background: none;
      padding: 0px;
   }

   :deep(.el-card) {
      border: none;
   }
</style>
